/**
 * Created by Administrator on 2017/3/14.
 */
var InvestAction = require('../complex/investAction');
var Progress = require('../../../src/libs/progress');
var InputNumber = require('../../../src/libs/input-number');
var Tabs = require('../../../src/libs/tabs');
var TabItem = Tabs.TabItem;
var Pagination = require('../../../src/libs/pagination');
var GuaranteeList = {
    "营业执照": "icon-yyzz",
    "融资方经营场所实地认证": "icon-rzfjrcsdzz",
    "税务登记证": "icon-swdjz",
    "账务表已审计": "icon-zwbysj",
    "组织机构代码证": "icon-zjjgdmz",
    "融资方从业年限": "icon-rzfcynx",
    "基本账户开户许可": "icon-jbzfkfxk",
    "融资方已在银行授信": "icon-rzfyzyhsx",
    "融资方成立年限": "icon-rzfclnx",
    "人行征信-无不良信用记录": "icon-rhzx",
    "授信方式-抵押": "icon-sxfsdy",
    "授信方式-质押": "icon-sxfszy",
    "融资方经营情况调查": "icon-rzfjyqkdc"
}
var Root = React.createClass({
    getInitialState: function () {
        return {
            pageVal: PageDM.pagination.value,
            ProDetailVal: PageDM.ProDetail.value,
            InvestmentRecordVal: PageDM.InvestmentRecord.value,
            PartsCount:PageDM.ProDetail.value.FinanceDetail.EachPartAmount * PageDM.ProDetail.value.FinanceDetail.MinInvestPartsCount
        }
    },
    componentDidMount: function(){
        var _this = this;
        UEventHub.emit("pageLoad","hello world!");
        UEventHub.on(PageDM.pagination.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                pageVal: v
            });
        });
        UEventHub.on(PageDM.ProDetail.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                ProDetailVal: v,
                PartsCount:PageDM.ProDetail.value.FinanceDetail.EachPartAmount * PageDM.ProDetail.value.FinanceDetail.MinInvestPartsCount
            });
        });
        UEventHub.on(PageDM.InvestmentRecord.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                InvestmentRecordVal: v
            });
        });
    },
    investSumChangeHandler: function(v){
        this.refs['expectedReturn'].innerHTML = (Math.round((v * this.state.ProDetailVal.FinanceDetail.Interest / 100 / 360 * this.state.ProDetailVal.FinanceDetail.Duration) * 100) / 100);
        window.PageDM.ProDetail.value.FinanceDetail.PartsCount = v;
        this.state.PartsCount = v;
    },
    tabsCallBack: function(index){
        this.defaultActiveKey = index;
    },
    defaultActiveKey:0,
    render: function () {
        var _this = this;
        //投资动作Props
        var actionData = {
            minFlag:_this.state.ProDetailVal.FinanceDetail.minFlag?_this.state.ProDetailVal.FinanceDetail.minFlag:false,
            flag:{
                login:_this.state.ProDetailVal.FinanceDetail.login,
                loginUrl:_this.state.ProDetailVal.FinanceDetail.loginUrl,
                confirmUrl:_this.state.ProDetailVal.FinanceDetail.confirmUrl,
                ProjectStatus:_this.state.ProDetailVal.FinanceDetail.ProjectStatus,
                JMBeginTime:_this.state.ProDetailVal.FinanceDetail.JMBeginTime,
                ProjectBeginTime:_this.state.ProDetailVal.FinanceDetail.ProjectBeginTime,
                MinInvestPartsCount:_this.state.ProDetailVal.FinanceDetail.MinInvestPartsCount,
                MaxInvestPartsCount:_this.state.ProDetailVal.FinanceDetail.MaxInvestPartsCount,
                EachPartAmount:_this.state.ProDetailVal.FinanceDetail.EachPartAmount
            }
        };
        return (
            <div>
                <div className="header">
                    <div className="top-bar fc-light">
                        <div className="container">
                            <span>服务热线：0816-2373017</span>
                            <span>服务时间：工作日 9:00-18:00</span>
                        <span className="nav-right">
                            <a href="登录.html">登录</a>
                            <a href="注册.html">注册</a>
                            <a href="../帮助中心/平台介绍.html">帮助中心</a>
                            <a href="../index.html">返回绵阳商业银行</a>
                        </span>
                        </div>
                    </div>
                    <div className="header-nav">
                        <div className="container">
                            <div className="logo f-left">
                                <a href="../index.html">
                                    <img src="../images/logo.jpg" alt=""/>
                                </a>
                                <a href="../index.html">
                                    <img src="../images/logoe.jpg" alt=""/>
                                </a>
                            </div>
                            <div className="nav f-right">
                                <ul className="clearfix">
                                    <li><a href="../index.html">首页</a></li>
                                    <li><a href="../我要投资.html">我要投资</a></li>
                                    <li><a href="../我要借款.html">我要借款</a></li>
                                    <li><a href="../账户中心/我的账户.html">我的账户</a></li>
                                </ul>
                            </div>
                            <div className="clear"></div>
                        </div>
                        <div className="shadow"></div>
                    </div>
                </div>

                <div className="container">
                    <div className="breadcrumbs"><a href="javascript:;">首页</a>&gt;<a href="javascript:;">我要投资</a>&gt; <span>项目详情</span></div>

                    <div className="project-detail" ref="projectDetail">
                        <h1 className="title">{_this.state.ProDetailVal.FinanceDetail.ProjectName?_this.state.ProDetailVal.FinanceDetail.ProjectName:""}{_this.state.ProDetailVal.FinanceDetail.IsExclusive?(<span className="bg-icon icon icon-zhuang tooltip" data-alt="该项目由绵阳市商业银行提供担保"></span>):""}</h1>
                        <div className="row clearfix">
                            <div className="f-left col-left">
                                <div className="detail-info clearfix">
                                    <ul>
                                        <li>
                                            {_this.state.ProDetailVal.FinanceDetail.Interest?(<p className="fc-main"><b>{_this.state.ProDetailVal.FinanceDetail.Interest}</b>%</p>):""}
                                            {_this.state.ProDetailVal.FinanceDetail.Interest?(<p className="fc-light">年化利率</p>):""}
                                        </li>
                                        <li>
                                            {_this.state.ProDetailVal.FinanceDetail.Duration?(<p><b>{_this.state.ProDetailVal.FinanceDetail.Duration}</b>天</p>):""}
                                            {_this.state.ProDetailVal.FinanceDetail.Duration?(<p className="fc-light">项目期限</p>):""}
                                        </li>
                                        <li>
                                            {_this.state.ProDetailVal.FinanceDetail.TotalAmount?(<p><b>{_this.state.ProDetailVal.FinanceDetail.TotalAmount<10000?_this.state.ProDetailVal.FinanceDetail.TotalAmount:(_this.state.ProDetailVal.FinanceDetail.TotalAmount/10000).toFixed(2)}</b>{_this.state.ProDetailVal.FinanceDetail.TotalAmount<10000?"元":"万元"}</p>):""}
                                            {_this.state.ProDetailVal.FinanceDetail.TotalAmount?(<p className="fc-light">项目规模</p>):""}
                                        </li>
                                    </ul>
                                </div>
                                <div className="detail-progress clearfix">
                                    <label>募集进度：</label>
                                    <Progress className="progress" type="line" percent={_this.state.ProDetailVal.FinanceDetail.Progress}></Progress>
                                    <p className="f-left">见证银行：<img src="../images/logo2.jpg" alt=""/> {_this.state.ProDetailVal.FinanceDetail.BankName}</p>
                                </div>
                            </div>
                            <div className="f-right detail-other">
                                <p>项目起息日：{_this.state.ProDetailVal.FinanceDetail.ValueBegin}</p>
                                <p>项目到期日：{_this.state.ProDetailVal.FinanceDetail.RepayBegin}</p>
                                <p>还款方式：{_this.state.ProDetailVal.FinanceDetail.GetMoneyChannel == 0 ? "后端付息后端还款":"前端付息后端还本"}</p>
                                <p>投资说明：{_this.state.ProDetailVal.FinanceDetail.MinInvestPartsCount * _this.state.ProDetailVal.FinanceDetail.EachPartAmount}元起投，递增金额{_this.state.ProDetailVal.FinanceDetail.AppendBuyAmount}元</p>
                            </div>
                        </div>
                        <div className="line"><b className="iconfont icon-ring"></b> <i className="iconfont icon-ring"></i></div>
                        <div className="row-bid clearfix">
                            <div className="f-left bid-money clearfix">
                                <div className="money f-left"><label>投资金额：</label>
                                    <InputNumber step={_this.state.ProDetailVal.FinanceDetail.AppendBuyAmount}
                                                 max={_this.state.ProDetailVal.FinanceDetail.EachPartAmount*_this.state.ProDetailVal.FinanceDetail.MaxInvestPartsCount}
                                                 min={_this.state.ProDetailVal.FinanceDetail.EachPartAmount*_this.state.ProDetailVal.FinanceDetail.MinInvestPartsCount}
                                                 value={_this.state.PartsCount}
                                                 ref="inputnumber"
                                                 onChange={this.investSumChangeHandler.bind(this)}/>
                                    <div className="unit">元</div>
                                    <div className="tips fc-main">{_this.state.ProDetailVal.FinanceDetail.InvestPromptText}</div>
                                </div>
                                <div className="income f-left">预期收益：<b className="fc-main" ref="expectedReturn">{Math.round((_this.state.PartsCount * _this.state.ProDetailVal.FinanceDetail.Interest / 100 / 360 * _this.state.ProDetailVal.FinanceDetail.Duration) * 100) / 100}</b> 元</div>
                            </div>
                            <div className="f-right bid">
                                <InvestAction data={actionData}/>
                            </div>
                        </div>
                        <span className="angle angle-top"></span>
                        <span className="angle angle-bottom"></span>
                    </div>

                    <div className="project-info">
                        <Tabs defaultActiveKey={_this.defaultActiveKey} callback={_this.tabsCallBack.bind(_this)}>
                            <TabItem tab="项目详情">
                                <div ref="projectDetailTb">
                                    <div className="title"><b></b>项目用途<b></b></div>
                                    <div className="content">
                                        <p>{_this.state.ProDetailVal.ProjectContent.Content}</p>
                                    </div>
                                    <div className="title"><b></b>银行见证信息<b></b></div>
                                    <div className="content bank-info">
                                        <ul className="clearfix">
                                            {
                                                _this.state.ProDetailVal.GuaranteeList.map(function(item,index){
                                                    return (<li><i className={GuaranteeList[item.Title]}></i>{item.Title}</li>);
                                                })
                                            }
                                        </ul>
                                    </div>
                                    <div className="title"><b></b>预期项目收益<b></b></div>
                                    <div className="content">
                                        <table className="table-1">
                                            <tr>
                                                <td></td>
                                                <td className="fc-link">金额</td>
                                                <td className="fc-link">还款时间</td>
                                            </tr>
                                            <tr>
                                                <td className="fc-light">预期收益</td>
                                                <td className="fc-light"><b className="fc-main">{Math.round((_this.state.ProDetailVal.FinanceDetail.TotalAmount * _this.state.ProDetailVal.FinanceDetail.Interest / 100 / 360 * _this.state.ProDetailVal.FinanceDetail.Duration) * 100) / 100}</b> 元</td>
                                                <td className="fc-light">{_this.state.ProDetailVal.FinanceDetail.RepayBegin}</td>
                                            </tr>
                                            <tr>
                                                <td className="fc-light">本金</td>
                                                <td className="fc-light"><b className="fc-main">{_this.state.ProDetailVal.FinanceDetail.TotalAmount}</b> 元</td>
                                                <td className="fc-light">{_this.state.ProDetailVal.FinanceDetail.RepayBegin}</td>
                                            </tr>
                                        </table>
                                        <div className="tips fc-light">免责声明：项目预期收益仅供参考，具体以实际收益为准</div>
                                    </div>
                                    <div className="title"><b></b>重要说明及风险提示<b></b></div>
                                    <div className="content">
                                        <p>1.
                                            本项目募集资金主要用于融资人（借入人）的借款需要，如出现前述融资人（借入人）未按时足额支付本息等不利情况，则本项目将有收益为零甚至本金损失的可能。本平台不对融资人归还融资本息提供担保。</p>
                                        <p>2. 募集不足或超募：若项目未能如期募足所需资金，项目将被撤销。投
                                            资资金将退回投资人，且退回资金不产生任何形式的孳息。如多个投资人在募集期间进行的投资导致项目实际募集资金超过项目融资规模（即产生超募），平台将根据投资人的投资时间顺序将顺序在后的投资资金/部分投资资金（即超募资金）于所投项目募集期结束日的T+1日（均为工作日，非工作日将延后至下一个工作日），通过支付清算机构向投资人指定回款账户退款，且退回资金不产生任何形式的孳息。</p>
                                        <p>3. 平台根据融资人申请可宣布项目提前到期，到期前平台将以短信、邮件或平台公告等任一方式告知投资人。平台将根据项目实际存续天数计算投资人收益。</p>
                                    </div>
                                </div>
                            </TabItem>
                            <TabItem tab="项目说明书">
                                <table className="table-2 table-even" ref="projectBookTb">
                                    <tbody ref="proBook">
                                    <tr>
                                        <th>项目名称：</th>
                                        <td>{_this.state.ProDetailVal.FinanceDetail.ProjectName}</td>
                                    </tr>
                                    <tr>
                                        <th>项目期限：</th>
                                        <td><span className="fc-main">{_this.state.ProDetailVal.FinanceDetail.Duration}</span> 天</td>
                                    </tr>
                                    <tr>
                                        <th>投资（借出）及收益币种：</th>
                                        <td>人民币</td>
                                    </tr>
                                    <tr>
                                        <th>产品类型：</th>
                                        <td>固定期限网络借贷产品</td>
                                    </tr>
                                    <tr>
                                        <th>预期年化收益率：</th>
                                        <td><span className="fc-main">{_this.state.ProDetailVal.FinanceDetail.Interest}%</span></td>
                                    </tr>
                                    <tr>
                                        <th>融资（总借入）金额：</th>
                                        <td><span className="fc-main">{_this.state.ProDetailVal.FinanceDetail.TotalAmount}元</span></td>
                                    </tr>
                                    <tr>
                                        <th>募集期：</th>
                                        <td>{_this.state.ProDetailVal.FinanceDetail.ProjectBeginTime}～{_this.state.ProDetailVal.FinanceDetail.JMBeginTime}</td>
                                    </tr>
                                    <tr>
                                        <th>项目起息日：</th>
                                        <td>募集结束，资金划转至融资人账户后的首个工作日。资金在起息日前不计算利息</td>
                                    </tr>
                                    <tr>
                                        <th>项目到期日：</th>
                                        <td>{_this.state.ProDetailVal.FinanceDetail.RepayBegin}，投资资金在项目到期日当天不计算利息</td>
                                    </tr>
                                    <tr>
                                        <th>资金到账日：</th>
                                        <td>到期日后1-3个工作日</td>
                                    </tr>
                                    <tr>
                                        <th>最小投资（借款）单位：</th>
                                        <td><span className="fc-main">{_this.state.ProDetailVal.FinanceDetail.EachPartAmount*_this.state.ProDetailVal.FinanceDetail.MinInvestPartsCount}</span>元，并须以最小投资单位的整数倍递增</td>
                                    </tr>
                                    <tr>
                                        <th>超募：</th>
                                        <td>如多个投资人在募集期间进行的投资导致项目实际募集资金超过项目融资规模（即产生超募），平台将根据投资人的投资时间
                                            顺序将顺序在后的投资资金/部份投资资金（即超募资金）于所投项目募集期结束日的T+1日（均为工作日，非工作日将延后至
                                            下一工作日），通过第三方支付机构向投资人指定回款账户退款
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>节假日：</th>
                                        <td>本项目在中国法定节假日期间亦可投标</td>
                                    </tr>
                                    <tr>
                                        <th>税款：</th>
                                        <td>投资收益的应纳税款由投资人自行申报及缴纳</td>
                                    </tr>
                                    <tr>
                                        <th>收益计算方法：</th>
                                        <td>期末收益=投资本金 x 预期年化收益 x 产品存续天数/360</td>
                                    </tr>
                                    <tr>
                                        <th>提前终止权：</th>
                                        <td>会员无权提前终止该产品或要求提前收取本金或收益</td>
                                    </tr>
                                    <tr>
                                        <th>其他规定：</th>
                                        <td>到期日至实际到账之间，客户资金（含本金、收益、罚息等）不计利息</td>
                                    </tr>
                                    <tr>
                                        <th>见证机构：</th>
                                        <td>绵阳市商业银行</td>
                                    </tr>
                                    <tr>
                                        <th>支付清算机构：</th>
                                        <td>中金支付有限公司</td>
                                    </tr>
                                    <tr>
                                        <th>工作日：</th>
                                        <td>佛冈农村信用社工作日</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </TabItem>
                            <TabItem tab="成交记录">
                                <table className="table-3 table-even">
                                    <thead>
                                    <tr>
                                        <th>投资用户</th>
                                        <th>投资金额</th>
                                        <th>是否投资成功</th>
                                        <th>投资时间</th>
                                    </tr>
                                    </thead>
                                    <tbody ref="investmentRecordTb">
                                        {
                                            _this.state.InvestmentRecordVal.length > 0 ? (_this.state.InvestmentRecordVal.map(function(item,index){
                                                return (
                                                    <tr>
                                                        <td>{item.PayUserName}</td>
                                                        <td>{item.PayAmount}</td>
                                                        <td><span className="iconfont icon-success"></span></td>
                                                        <td>{item.PayTime}</td>
                                                    </tr>
                                                )
                                            })):(<tr><td>暂无记录</td></tr>)
                                        }
                                    </tbody>
                                </table>
                                <Pagination paginationDM={PageDM.pagination} pageVal={_this.state.pageVal}></Pagination>
                            </TabItem>
                        </Tabs>
                    </div>
                </div>

                <div className="footer">
                    <div className="container">
                        <div className="footer-logo f-left">
                            <p className="logo-foot"><img src="../images/foot-logo.png" alt=""/></p>
                            <p className="txt">
                                2005－2013 绵阳市商业银行股份有限公司
                                <a href="http://www.miitbeian.gov.cn" target="_blank">粤ICP备11013283123号</a>
                            </p>
                        </div>
                        <div className="footer-nav f-right">
                            <div className="col">
                                <h3>关于我们</h3>
                                <ul>
                                    <li><a href="../帮助中心/平台介绍.html">平台介绍</a></li>
                                    <li><a href="../帮助中心/名词解释.html">名词解释</a></li>
                                    <li><a href="../帮助中心/联系我们.html">联系我们</a></li>
                                    <li><a href="../帮助中心/服务协议.html">服务协议</a></li>
                                </ul>
                            </div>
                            <div className="col">
                                <h3>安全保障</h3>
                                <ul>
                                    <li><a href="../帮助中心/安全保障.html">项目安全</a></li>
                                    <li><a href="../帮助中心/安全保障.html">资金安全</a></li>
                                    <li><a href="../帮助中心/安全保障.html">信息安全</a></li>
                                    <li><a href="../帮助中心/安全保障.html">账户安全</a></li>
                                </ul>
                            </div>
                            <div className="col">
                                <h3>帮助中心</h3>
                                <ul>
                                    <li><a href="../帮助中心/投资操作指引.html">投资指引</a></li>
                                    <li><a href="../帮助中心/融资操作指引.html">融资指引</a></li>
                                    <li><a href="../帮助中心/平台公告.html">平台公告</a></li>
                                    <li><a href="javascript:;">常见问题</a></li>
                                </ul>
                            </div>
                            <div className="col col-service">
                                <p>客服专线<br/>0816-2373017</p>
                                <p>服务时间<br/>工作日9:00 - 18:00</p>
                            </div>
                        </div>
                        <div className="clear"></div>
                    </div>
                </div>
            </div>
        )
    }
});
ReactDOM.render(<Root/>, document.getElementById('main'));